<template>
    <div class="c-operation-notice__wrap" v-if="couldShowNotice">
        <i class="c-operation-notice__close" @click="couldShowNotice = false">&times;</i>
        <div class="c-operation-notice__container">
            <div class="c-operation-notice__content">
                系统公告：为了更好的提供用户体验，提升性能，现云丁计划于<strong style="color:#000">2019年6月18日凌晨1:30至2:30</strong>对系统进行服务器扩容升级，升级期间系统无法登陆使用，密码开门等线下操作不受影响，请公寓方提前办理相关业务，以免造成损失，谢谢合作！
            </div>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'operation-notice',
      data () {
        return {
          couldShowNotice: false
        }
      },
      created () {
        this.checkShowTime()
      },
      methods: {
        checkShowTime () {
          const endTime = new Date('2019 06 18 06:00').getTime()
          this.couldShowNotice = endTime > Date.now()
        }
      }
    }
</script>

<style lang="less" scoped>
    .c-operation-notice{
        &__wrap{
            position: fixed;
            z-index: 1000;
            left: 50%;
            top: 8px;
            width: 50%;
            margin: 0 auto;
            padding: 10px 15px;
            padding-right: 30px;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
            transform: translateX(-50%);
        }

        &__close{
            position: absolute;
            right: 6px;
            top: 46%;
            padding: 4px;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 16px;
        }

        &__container{
            overflow: hidden;
            white-space: nowrap;
        }

        &__content{
            animation: infinite-scroll 30s linear;
            animation-iteration-count: infinite;
        }
    }

    @keyframes infinite-scroll {
        from {
            transform: translate3d(100%, 0, 0);
        } to {
            transform: translate3d(-1500px, 0, 0);
        }
    }
</style>
